<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>{$index.name}</title>
    {js href='/public/static/jquery/jquery-1.11.0.min.js' /}
    {js href='/public/static/layui/layui.js' /}
    {CSS href="/public/static/layui/css/layui.css" /}
    {CSS href="__ADDONSTATIC__/css/temp_style.css" /}
</head>
<body style="background: none" >
<div class="layui-fluid" style="padding: 0;">
    <div class="layui-row">
        <div class="layui-carousel" id="slider">
            <div carousel-item>
                {volist name='sliders' id='slider'}
                <div><a href="{$slider.url}"><img src="{$slider.img_path}" alt=""/></a></div>
                {/volist}
            </div>
        </div>
    </div>

    <div class="layui-row  column-list layui-col-space10"  style="padding-left: 15px;padding-right: 15px;">
        {volist name='columns' id='column'}
        <div class="layui-col-xs3 layui-col-sm2 layui-col-md2 column-item-wrap">
            <div class="column-item">
                <a href="{:addonUrl('index/columns',['id'=>$column.id])}">
                    <div class="img-wrap"><img src="{$column.img_path}" alt=""/></div>
                    <p>{$column.name}</p>
                </a>
            </div>
        </div>
        {/volist}

    </div>

</div>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#slider'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>